<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网上银行模拟系统</title>
    <style>
        /* 全局样式初始化 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "微软雅黑", sans-serif;
            background-color: #f4f4f4;
        }
        /* 标题栏样式 - 深紫色主题 */
        .title-bar {
            background-color: #4b2e83; /* 深紫色标题栏 */
            text-align: center;
            padding: 20px;
            font-size: 24px;
            color: #ffffff; /* 白色标题文字 */
            border-bottom: 1px solid #3b2468;
        }
        /* 导航栏样式 - 深紫色 */
        .nav-bar {
            background-color: #5a3696; /* 导航栏颜色 */
            display: flex;
            justify-content: flex-end;
            padding: 10px 20px;
        }
        .nav-bar a {
            color: #ffffff; /* 白色导航文字 */
            text-decoration: none;
            margin-left: 20px;
            font-size: 14px;
            transition: color 0.3s ease;
        }
        .nav-bar a:hover {
            color: #cbc3e3; /* 悬停时浅紫色文字 */
        }
        /* 主容器样式，实现左右布局 */
        .main-container {
            display: flex;
            width: 1000px;
            margin: 20px auto;
            background-color: #ffffff;
            border: 1px solid #ddd;
            border-radius: 5px;
            overflow: hidden;
        }
        /* 左侧菜单样式 - 深紫色系 */
        .left-menu {
            width: 200px;
            background-color: #e5e5e5;
            background: linear-gradient(to bottom, #f0ebf7, #e5e0ed); /* 浅紫色渐变背景 */
        }
        .left-menu ul {
            list-style: none;
        }
        .left-menu li {
            padding: 15px;
            border-bottom: 1px solid #ccc;
            transition: background-color 0.3s ease;
        }
        .left-menu li a {
            text-decoration: none;
            color: #333333;
            display: block;
        }
        .left-menu li:hover {
            background-color: #dcd0e8; /* 悬停时浅紫色背景 */
        }
        /* 中间内容区域样式 */
        .content {
            flex: 1;
            text-align: center;
            padding: 20px;
        }
        .content h3 {
            margin-top: 50px;
            color: #333333;
        }
        /* 右侧操作区域样式 - 深紫色系 */
        .right-operation {
            width: 200px;
            background-color: #e5e5e5;
            background: linear-gradient(to bottom, #f0ebf7, #e5e0ed); /* 浅紫色渐变背景 */
        }
        .right-operation ul {
            list-style: none;
        }
        .right-operation li {
            padding: 15px;
            border-bottom: 1px solid #ccc;
            transition: background-color 0.3s ease;
        }
        .right-operation li a {
            text-decoration: none;
            color: #333333;
            display: block;
        }
        .right-operation li:hover {
            background-color: #dcd0e8; /* 悬停时浅紫色背景 */
        }
    </style>
</head>
<body>
<!-- 标题栏 -->
<div class="title-bar">
    欢迎来到网上银行模拟系统
</div>
<!-- 导航栏 -->
<div class="nav-bar">
    <a href="personalInfo.jsp">管理员</a>
</div>
<!-- 主容器 -->
<div class="main-container">
    <!-- 左侧菜单 -->
    <div class="left-menu">
        <ul>
            <li><a href="balanceQuery.jsp">用户信息列表</a></li>
            <li><a href="accountCancel.jsp">交易记录表</a></li>
            <li><a href="passwordModify.jsp">转账记录表</a></li>
            <li><a href="backlose.html">挂失记录表</a></li>
        </ul>
    </div>
    <!-- 中间内容 -->
    <div class="content">
        <h3>请选择您的操作</h3>
    </div>
    <!-- 右侧操作 -->
    <div class="right-operation">
        <ul>
            <li><a href="">贷款申请表</a></li>
            <li><a href="withdrawalRecords.html">取款记录表</a></li>
            <li><a href="withdrawalRecords.html">存款记录表</a></li>
            <li><a href="transfer.jsp">一键绑卡记录</a></li>
        </ul>
    </div>
</div>
</body>
</html>